<script setup lang="ts">
import { ElementObjectType, } from '@/objects/ElementObject';
import { useStage } from '@/store/stage'
import SvgEffect from './SvgEffect.vue';
import { StageObject } from '@/objects/StageObject';
import GroupDef from './GroupDef.vue';
import Defs from './Defs.vue';
import { LinearGradient, RadialGradient } from '@/objects/Color';
const stage = useStage()
defineProps<{
    data: StageObject[],
}>()
</script>
<template>
    <template v-for="el in data" :key="el.id">
        <rect :data-id="el.id" v-if="el.type == ElementObjectType.rect" :x="el.x" :y="el.y"
            :width="el.getValue('width')" :height="el.getValue('height')"
            :class="{ 'el-active': el.id === stage.currentObject.element?.id }" :stroke="el.getValue('stroke').value"
            :stroke-width="el.getValue('strokeWidth')" :fill="el.getValue('fill').value"
            :fill-opacity="el.getValue('fillOpacity')" :transform-origin="el.transform.origin"
            :transform="el.transform.transformToString()" :rx="el.getValue('rx')" :ry="el.getValue('ry')"
            :filter="el.filters.value" :stroke-dasharray="el.getValue('strokeDasharray')"
            :stroke-dashoffset="el.getValue('strokeDashoffset')" :stroke-linecap="el.getValue('strokeLinecap').value"
            :stroke-linejoin="el.getValue('strokeLinejoin').value">
            <SvgEffect :data="el.children" />
        </rect>
        <ellipse :data-id="el.id" v-else-if="el.type == ElementObjectType.ellipse" :cx="el.x" :cy="el.y"
            :rx="el.getValue('rx')" :ry="el.getValue('ry')"
            :class="{ 'el-active': el.id === stage.currentObject.element?.id }" :stroke="el.getValue('stroke').value"
            :stroke-width="el.getValue('strokeWidth')" :fill="el.getValue('fill').value"
            :fill-opacity="el.getValue('fillOpacity')" :transform-origin="el.transform.origin"
            :transform="el.transform.transformToString()" :filter="el.filters.value"
            :stroke-linecap="el.getValue('strokeLinecap').value" :stroke-linejoin="el.getValue('strokeLinejoin').value"
            :stroke-dasharray="el.getValue('strokeDasharray')" :stroke-dashoffset="el.getValue('strokeDashoffset')">
            <SvgEffect :data="el.children" />
        </ellipse>
        <circle :data-id="el.id" v-else-if="el.type == ElementObjectType.circle" :cx="el.getValue('x')"
            :cy="el.getValue('y')" :r="el.getValue('r')"
            :class="{ 'el-active': el.id === stage.currentObject.element?.id }" :stroke="el.getValue('stroke').value"
            :stroke-width="el.getValue('strokeWidth')" :fill="el.getValue('fill').value"
            :fill-opacity="el.getValue('fillOpacity')" :transform-origin="el.transform.origin"
            :transform="el.transform.transformToString()" :filter="el.filters.value"
            :stroke-linecap="el.getValue('strokeLinecap').value" :stroke-linejoin="el.getValue('strokeLinejoin').value"
            :stroke-dasharray="el.getValue('strokeDasharray')" :stroke-dashoffset="el.getValue('strokeDashoffset')">
            <SvgEffect :data="el.children" />
        </circle>
        <path :id="el.id" :data-id="el.id" v-else-if="el.type == ElementObjectType.path"
            :class="{ 'el-active': el.id === stage.currentObject.element?.id }" :d="el.pathString"
            :stroke="el.getValue('stroke').value" :stroke-width="el.getValue('strokeWidth')"
            :fill="el.getValue('fill').value" :transform-origin="el.transform.origin"
            :transform="el.transform.transformToString()" :fill-opacity="el.getValue('fillOpacity')"
            :filter="el.filters.value" :stroke-dasharray="el.getValue('strokeDasharray')"
            :stroke-linecap="el.getValue('strokeLinecap').value" :stroke-linejoin="el.getValue('strokeLinejoin').value"
            :stroke-dashoffset="el.getValue('strokeDashoffset')">
            <SvgEffect :data="el.children" />
        </path>
        <text :data-id="el.id" v-else-if="el.type == ElementObjectType.text" :x="el.x" :y="el.y"
            :font-size="el.getValue('fontSize')" :class="{ 'el-active': el.id === stage.currentObject.element?.id }"
            :stroke="el.getValue('stroke').value" :stroke-width="el.getValue('strokeWidth')"
            :transform-origin="el.transform.origin" :transform="el.transform.transformToString()"
            :fill="el.getValue('fill').value" :fill-opacity="el.getValue('fillOpacity')" :filter="el.filters.value"
            :stroke-dasharray="el.getValue('strokeDasharray')" :stroke-dashoffset="el.getValue('strokeDashoffset')"
            :stroke-linecap="el.getValue('strokeLinecap').value" :stroke-linejoin="el.getValue('strokeLinejoin').value">
            {{ el.getValue('text') }}
            <SvgEffect :data="el.children" />
        </text>
        <use :data-id="el.id" v-else-if="el.type == ElementObjectType.use" :width="el.getValue('width')"
            :height="el.getValue('height')" :class="{ 'el-active': el.id === stage.currentObject.element?.id }"
            :href="el.getValue('href').value" :x="el.x" :y="el.y" :transform-origin="el.transform.origin"
            :transform="el.transform.transformToString()" :filter="el.filters.value"
            :stroke-dasharray="el.getValue('strokeDasharray')" :stroke-dashoffset="el.getValue('strokeDashoffset')">
            <SvgEffect :data="el.children" />
        </use>

        <linearGradient :id="el.id" v-else-if="(el instanceof LinearGradient)" :gradientUnits="el.getValue('gradientUnits')"
            :gradientTransform="el.getValue('gradientTransform')" :x1="el.getValue('x1')" :y1="el.getValue('y1')" :x2="el.getValue('x2')" :y2="el.getValue('y2')">
            <stop v-for="(stop, index) in el.children" :key="index" :offset="stop.getValue('offset') + '%'"
                :stop-color="stop.getValue('stopColor')" />
        </linearGradient>
        <radialGradient :id="el.id" v-else-if="(el instanceof RadialGradient)">
            <stop v-for="(stop, index) in el.children" :key="index" :offset="stop.getValue('offset') + '%'"
                :stop-color="stop.getValue('stopColor')" />
        </radialGradient>
        <GroupDef :data="el" />
        <Defs :data="el" />
    </template>
</template>
<style scoped>
.el-active {
    outline: dashed 1px #FF5722;
}

path,
rect,
g,
use,
text,
ellipse {
    cursor: grab;
    user-select: none;
}
</style>